<template>
	<view class="container" :style="activityJson?.wrapper?.style">
		
		<view class="inner">
			<view v-for="(i, index) in eggsData" :key="index" class="card-box">
				<view class="card">
					<view class="egg">
						<view class="beforeClick">
							<image v-if="i.isEggs" class="allEggs" :src="i.imgUrl" mode="aspectFill"></image>
							<image v-if="i.isShow" :class="{active:!i.isEggs}" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/5ce6af6a-0817-490b-9cfe-ce12939e5f38.png" mode="aspectFill" class="hammer"></image>
						</view>
						<view class="afterClick" v-if="!i.isEggs">
							<image class="top" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a23519af-9d57-48c7-a492-0ff9ccfd9871.png" mode="aspectFill"></image>
							<!-- <image class="middle" src="https://picsum.photos/900/600" mode="aspectFill" ></image> -->
							<image class="bottom" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/be6a3284-8d1d-47be-8fa5-2e1efa6895d4.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="btn" @touchstart="moveInto(i)" @touchend="moveOut(i)">
						<image :src="i.btnUrl" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="frequency">
			您还有{{ vdata.drawTimes }}次砸蛋次数
		</view>
		<view class="text-bottom">
			<view class="text-content">
				<view class="title">
					<!-- <image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/0086ce9d-6506-47c8-9798-dbc973f771e0.png" mode="aspectFill"></image> -->
					玩法介绍
				</view>
				<view class="text">
					<text>{{ vdata.activityDetail.remark?.replace(/\\n/g, "\n") }}</text>
				</view>
			</view>
		</view>

		<!-- 点击蛋之后出现的奖品弹窗 -->
		<view class="dialog" v-show="isDialog">
			<image class="awardDialog" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/2b2a33ba-04d9-43bf-ae84-3ba73df130c2.png" mode="aspectFill"></image>
			<view class="content">
				<!-- <image src="https://picsum.photos/900/600" mode="aspectFill"></image> -->
				<!-- qq音乐会员X1年 -->
				<view class="text">
					<text>{{awardInfo}}</text>
				</view>
			</view>
			<image class="delte" @click="closeDialog" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/40807c9c-799c-49c0-a115-791a0adf621e.png" mode="aspectFill"></image>
		</view>
	</view>
	<!-- 	<view class="test">
		<view class="item">
			<image class="top" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a23519af-9d57-48c7-a492-0ff9ccfd9871.png" mode="aspectFill"></image>
			<image src="https://picsum.photos/900/600" mode="aspectFill" class="middle"></image>
			<image class="bottom" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/be6a3284-8d1d-47be-8fa5-2e1efa6895d4.png" mode="aspectFill"></image>
		</view>
	</view> -->

</template>

<script setup>
	import { ref, reactive, getCurrentInstance } from 'vue'
	import { onShow, onReady, onLoad } from '@dcloudio/uni-app';
	import { $activityTakePartIn, $getAwardTimes } from '@/http/apiManager.js';
	import storageManage from '@/util/storageManage.js'

	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties

	const eggsData = ref([{
			id: '1',
			imgUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d0106e14-2d8f-4712-8886-c9722e2e0358.png',
			bottomEggs: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/be6a3284-8d1d-47be-8fa5-2e1efa6895d4.png',
			topEggs: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a23519af-9d57-48c7-a492-0ff9ccfd9871.png',
			winner: '谢谢惠顾',
			btnUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/cdd91aea-ee94-4c88-baae-e5c69a03dfdd.png',
			isDialog: false,
			isEggs: true
		},
		{
			id: '2',
			imgUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d0106e14-2d8f-4712-8886-c9722e2e0358.png',
			winner: '谢谢惠顾',
			btnUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/cdd91aea-ee94-4c88-baae-e5c69a03dfdd.png',
			isShow: false,
			isEggs: true
		},
		{
			id: '3',
			imgUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d0106e14-2d8f-4712-8886-c9722e2e0358.png',
			winner: '谢谢惠顾',
			btnUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/cdd91aea-ee94-4c88-baae-e5c69a03dfdd.png',
			isShow: false,
			isEggs: true
		},
		{
			id: '4',
			imgUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d0106e14-2d8f-4712-8886-c9722e2e0358.png',
			winner: '谢谢惠顾',
			btnUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/cdd91aea-ee94-4c88-baae-e5c69a03dfdd.png',
			isShow: false,
			isEggs: true
		},
		{
			id: '5',
			imgUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d0106e14-2d8f-4712-8886-c9722e2e0358.png',
			winner: '谢谢惠顾',
			btnUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/cdd91aea-ee94-4c88-baae-e5c69a03dfdd.png',
			isShow: false,
			isEggs: true
		},
		{
			id: '6',
			imgUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d0106e14-2d8f-4712-8886-c9722e2e0358.png',
			winner: '谢谢惠顾',
			btnUrl: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/cdd91aea-ee94-4c88-baae-e5c69a03dfdd.png',
			isShow: false,
			isEggs: true
		},
	])
	// const vdata = reactive({})
	// 控制锤子显示还是隐藏
	const isShow = ref(false)
	// 控制弹窗是否显示还是隐藏
	const isDialog = ref(false)
	// 用于存储中奖信息
	const awardInfo = ref('')
	const vdata = reactive({
		activityId: '', // 活动id
		activityDetail: {}, // 活动详情
		drawTimes: 0, // 抽奖次数
		hasMchNo: undefined, // 是否是商家版活动 当前用户是否绑定商户号
	})
	
	const activityJson = ref({
		"wrapper":{
			"style":{
				"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/396b906c-f828-41c3-8d53-11b4edeeb87e.png') no-repeat left top / 100% 1580rpx,#fd4b0d"
			}
		}
	})
	
	// 用来存储
	onLoad(async ({ activityId, activityDetail }) => {
		vdata.activityId = activityId
		vdata.activityDetail = JSON.parse(decodeURIComponent(activityDetail))// 活动动态参数
		activityJson.value = JSON.parse(vdata.activityDetail.activityJson || '{}')
		// 标题更改为活动名称
		uni.setNavigationBarTitle({
			title: vdata.activityDetail.activityName || '砸金蛋'
		})
	})
	onShow(async () => {
		// 请求抽奖次数
		try {
			const result = await $getAwardTimes(vdata.activityId, vdata.activityDetail.activityTemplateNo)
			vdata.drawTimes = result
			vdata.hasMchNo = undefined
		} catch (e) {
			//TODO handle the exception
			vdata.hasMchNo = e
		}
	})

	// 点击蛋的事件
	// const clickEggs = (i,index) =>{
	// 	console.log(i,index)
	// }
	// 判断砸蛋的次数
	const eggNums = ref(1)

	// 手指移入
	const moveInto = (i) => {
		getApp().preventActive(() => {
			// 判断用户是否绑定商户
			if (vdata.hasMchNo === 'noMchNo') { // 代表是商家版活动 并且当前用户还未绑定商户号 不允许参与活动
				uni.showModal({
					title: '参与失败',
					content: '当前用户未绑定商户身份，请绑定商户身份',
					success({ cancel }) {
						if (cancel) return
						uni.navigateTo({
							url: '/pageUser/bindMch/index'
						})
					}
				})
				return false
			}
			/**
			 * 是否有参与次数再次判断 拦截
			 */
			if (vdata.drawTimes <= 0) {
				$infoBox.toast('您的抽奖机会已用尽')
				return false
			}
			$activityTakePartIn({ activityId: vdata.activityId, activityTemplateNo: vdata.activityDetail.activityTemplateNo }).then(res => {
				if (res.bizData['awardName'] == undefined) {
					eggsData.value.forEach(item => {
						if (i.id == item.id) {
							setTimeout(() => {
								item.isShow = true
								item.isEggs = false
							}, 600)
						}
					})
					setTimeout(() => {
						isDialog.value = true
						awardInfo.value = '没有中奖'
					}, 800)

				} else {
					eggsData.value.forEach(item => {
						if (i.id == item.id) {
							setTimeout(() => {
								item.isShow = true
								item.isEggs = false
							}, 600)
						}
					})
					setTimeout(() => {
						isDialog.value = true
						awardInfo.value = res.bizData.awardName
					}, 800)
				}
			})
		})
	}
	// 蛋是否中奖的
	const awardEggs = ref({})
	// 手指移出
	const moveOut = (i) => {
		// console.log(2222)
		// console.log(i)
		// eggsData.value.forEach(item=>{
		// if(i.id == item.id){
		// 	setTimeout(()=>{
		// 		item.isShow = false
		// 		// item.isDialog = true
		// 		isDialog.value = !item.isDialog
		// 	},600)
		// }
		// })
	}

	// 关闭弹窗
	const closeDialog = () => {
		// console.log(1111)
		isDialog.value = false
		eggsData.value.forEach(item => {
			item.isShow = false,
				item.isEggs = true
		})
	}
</script>

<style lang="scss">
	.active {
		transition: .5s;
		transition-delay: .3;
		transform: rotateX(30deg);
	}

	.container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/396b906c-f828-41c3-8d53-11b4edeeb87e.png') no-repeat left top / 100% 1580rpx,
					#fd4b0d;

		.frequency {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #FCE9AC;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
		}

		.dialog {
			width: 100vw;
			height: 100vh;
			position: fixed;
			z-index: 15;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, .7);

			.awardDialog {
				width: 100%;
				height: 100%;
			}

			.content {
				width: 400rpx;
				height: 400rpx;
				position: absolute;
				z-index: 16;
				top: 30%;
				left: 50%;
				transform: translate(-50%, -50%);
				// color: #FFFFFF;
				color: green;
				font-size: 52rpx;

				.text {
					width: 100%;
					height: 40rpx;
					// display: flex;
					// justify-content: center;
					// align-items: center;
					text-align: center;
					line-height: 40rpx;
					// position: fixed;
					// z-index: 30;
					color: red !important;
				}
			}

			.delte {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				right: 60rpx;
				top: 60rpx;
				// transform: translateX(-50%);
			}
		}

		.inner {
			width: 100%;
			height: 758rpx;
			// background-color: green;
			// left: ;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			padding: 40rpx;
			box-sizing: border-box;
			margin-top: 835rpx;

			.card-box {
				width: 30%;
				height: 48%;
				position: relative;
				z-index: 4;
				margin-right: 20rpx;
				box-sizing: border-box;
				cursor: pointer;

				.card {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;

					.egg {
						width: 100%;
						height: 70%;

						// .beforeClick{
						// width: 100%;
						// height: 100%;
						.allEggs {
							width: 198rpx;
							height: 212rpx;
						}

						.hammer {
							position: absolute;
							width: 120rpx;
							height: 138rpx;
							right: -18%;
							top: 3%;
							z-index: 8;
							transform: .3s;
							transform: rotateX(20deg);
						}

						// }
						.afterClick {
							width: 100%;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: bottom;
							align-items: center;
							position: relative;

							.middle {
								width: 94rpx;
								height: 94rpx;
								position: absolute;
								bottom: 80rpx;
							}

							.top {
								position: absolute;
								width: 134rpx;
								height: 84rpx;
								z-index: -1;
								top: -3rpx;
								// transform: rotateX(30deg);
							}

							.bottom {
								position: absolute;
								width: 198rpx;
								height: 138rpx;
								z-index: 1;
								bottom: 0;
							}

						}

						// image{
						// 	width: 100%;
						// 	height: 100%;
						// }
					}

					.btn {
						padding-top: 10rpx;
						box-sizing: border-box;
						width: 100%;
						height: 20%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 74%;
							height: 100%;
						}
					}

				}
			}
		}

		.text-bottom {
			width: 100%;
			// height: 900rpx;
			background-color: #FF4144;
			padding: 20rpx;
			box-sizing: border-box;

			.text-content {
				height: 100%;
				border-radius: 24rpx;
				background: -webkit-linear-gradient(45deg, #FEE6EB, #FEE6E9, #FEE096);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(45deg, #FEE6EB, #FEE6E9, #FEE096);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(45deg, #FEE6EB, #FEE6E9, #FEE096);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(45deg, #FEE6EB, #FEE6E9, #FEE096);

				/* 标准的语法（必须放在最后） */
				.title {
					padding: 20rpx;
					box-sizing: border-box;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 32rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				.text {
					padding: 15rpx;
					box-sizing: border-box;
				}
			}
		}

		.top-bg {
			width: 100%;
			height: 1580rpx;
			background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/396b906c-f828-41c3-8d53-11b4edeeb87e.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 0 0;
		}


	}

	// .dialog{
	// 	width: 100vw;
	// 	height: 100vh;
	// 	position: fixed;
	// 	z-index: 20;
	// 	left: 0;
	// 	top: 0;
	// 	background-color: rgba(0, 0, 0, .7);
	// 	.awardDialog{
	// 		width: 100%;
	// 		height: 842rpx;
	// 		// position: fixed;
	// 		z-index: 10;
	// 		left: 0;
	// 		top: 0;
	// 	}
	// 	.delte{
	// 		width: 60rpx;
	// 		height: 60rpx;
	// 		// position: fixed;
	// 		z-index: 10;
	// 		left: 50%;
	// 		top: 842rpx;
	// 		transform: translateX(-50%);
	// 	}
	// }
</style>